<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/hyaStyless.css">
    <title>热门影视</title>

    <style>
        .wrap-search {
            margin: 15px;
            background: #E6E6E6;
            height: 30px;
            border-radius: 5px;
            text-align: center;
        }

        .item-img {
            width: 60px;
            height: 90px;
            margin-right: 10px;
        }

        .orange {
            color: orange;
            font-size: 12px;
            padding: 2px 4px;
            border-radius: 4px;
            text-align: center;
        }

        .gray-small {
            color: #A2A2A2;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <section id="moviePage">
        <div class="modal-overlay" v-if="queryState"></div>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <div class="mui-title">
                热门影视
            </div>
        </header>
        <!-- <div class="mui-content" style="background: white;padding-bottom: 40px;">
            <div class="wrap-search">
                <span class="mui-icon mui-icon-search" style="line-height: 30px;color: #AAAAAA;font-size: 16px;"></span>
                <span style="line-height: 30px;color: #AAAAAA;font-size: 14px;">电影/电视剧/影人</span>
            </div>
        </div> -->
        <div id="refreshContainer" class="mui-scroll-wrapper" style="top: 50px;">
            <div class="mui-scroll">
                <ul id="movies" class="mui-table-view">
                    <li class="mui-table-view-cell" v-for="(item,index) in data">
                        <img class="mui-pull-left item-img" :src="item.imgSrc" />
                        <h4 class="mui-ellipsis">{{item.title}}</h4>
                        <div class="mui-ellipsis">
                            <span class="gray-small">{{item.genresN}}</span> 
                            <span class="orange">{{item.averageN}}分</span>
                        </div>
                        <div class="mui-ellipsis gray-small">导演：{{item.directorsN}}</div>
                        <div class="mui-ellipsis gray-small">主演：{{item.casts}}</div>
                    </li>
                </ul>
            </div>
            <p style="width:0;height:0;overflow: hidden;display: none;"></p>
        </div>
    </section>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/mui/3.7.1/js/mui.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        let moviePage_data = new Vue({
            el: "#moviePage",
            data() {
                return {
                    queryState: true,
                    data: [],
                    count: 8,
                    page: 1,
                    totalPage: 999,
                    start: 0
                }
            },
            created() {
                this.$nextTick(function () {
                    let that = this;
                    that.getData();

                    mui.init({
                        pullRefresh: {
                            container: '#refreshContainer',
                            up: {
                                auto: false,
                                contentrefresh: '正在加载...',
                                callback: that.pullupRefresh
                            }
                        }
                    });
                })
            },
            methods: {
                getData: function () {
                    let that = this;

                    var url = 'https://api.douban.com/v2/movie/in_theaters?start=' + that.start + '&count=' +
                        that.count;
                    $.getJSON('https://query.yahooapis.com/v1/public/yql', {
                        q: "select * from json where url=\"" + url + "\"",
                        format: "json"
                    }, function (res) {
                        if (res.query.results != "" && res.query.results != "[]") {
                            var J_data = JSON.parse(JSON.stringify(res.query.results));
                            var resJson=J_data.json;
                            that.totalPage = resJson.total;
                            $.each(resJson.subjects, function (n,element) {
                                element.imgSrc = element.images.small; //电影海报
                                element.genresN = element.genres.toString().replace(/,/g, ' / '); //逗号替换成斜杠，电影类型
                                element.averageN = element.rating.average; //评分
                                element.directorsN = element.directors.name; //导演
                                var casts = ''; //主演
                                for (var j = 0; j < element.casts.length; j++) {
                                    casts += element.casts != "" ? element.casts[j].name : ""; //casts字段可能为空
                                    if (j != element.casts.length - 1) {
                                        casts += ' / ';
                                    }
                                }
                                element.casts = casts;
                                that.data.push(element);
                            });
                            that.queryState = false;
                        }
                    });

                },
                pullupRefresh: function () {
                    let that = this;
                    //这里很重要，这里获取页码 公式：总条数/每页显示条数
                    setTimeout(function () {
                        if (that.data.length < that.totalPage) {
                            that.start += that.count;
                            that.getData();
                            mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
                        } else {
                            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                            mui.toast("无更多数据")
                        }
                    }, 1500);
                }
            }
        })
    </script>
</body>

</html>